/* Styles généraux */

header {
        padding: 5px 15px 5px 15px; /*Haut - Droit - Bas - Gauche*/
		text-align:center;
        background-color:#4CAF50;
		
    }
 
   header h1 {
		/*Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.*/
		
        /* Sur mon GSM, les écritures sont presqu'illisibles alors que sur l'ordinateur, elles sont énormes; donc à éviter
		le Viewport quand les tailles d'écrans sont très différentes.*/
		/*font-size:3vw Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.*/
		
		font-family:Arial; 
		font-size:30px;
    }
	  header h2 {
        
		/*font-size:2vw; Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.*/
		font-family:Arial; 
		font-size:20px;
    }
	
	
	header h3 {
        
		/*font-size:2vw; Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.*/
		font-family:Arial;
		color: #FFFFFF;
		font-size:20px;
    }
	
	footer {
        background-color: #4CAF50;            
        text-align: center;
        padding: 5px 10px 5px 10px; /*Haut - Droit - Bas - Gauche*/	
    }	
	
	footer h3 {
        
		
		color: #FFFFFF;
    }	
	
	
 body {
        font: 20px Arial,sans-serif; 
        margin: 0px;
    }
	
  
	
    
/*
The "box-sizing" property allows us to include the padding and border in an element's total width and height.

If you set "box-sizing: border-box" on an element, padding and border are included in the width and height.

The code below ensures that all elements are sized in this more intuitive way. 

Le caractère * (étoile) désigne tous les éléments du document 
*/

* {
  box-sizing: border-box;
}

/*Pour justifier à gauche un paragraphe*/
p.padding {
  padding-left: 2cm;
}

/* le contenu n'est pas rogné */
 .main{
	overflow: hidden; 
	
    
 }

.mainLeft {
	/*background-color:#f1f1f1;*/
	float:left;
	width:50%; /* The width is 50%, by default */
	height: 100%;
	padding: 0px 10px 0px 10px; /*Haut - Droit - Bas - Gauche*/	
	
}

.mainLeft h1
{
    text-align:center;
	
    }


	
.mainRight {
  background-color:powderblue;
  float:left;
  width:50%; /* The width is 50%, by default to match 100% */ 
  height: 100%;
  padding: 0px 10px 0px 10px; /*Haut - Droit - Bas - Gauche*/	
  text-align:left;
  border: 1px solid red;
}

.mainRight h1
{
    text-align:center;
	
    } 
	
.mainRight h3 {
        
		font: 16px Arial,sans-serif; 
		color: #FFFFFF;
    }		
	

.soins {
 
	background-color:#e5e5e5;
	float:left;
	width:100%; /* The width is 100%, by default */
	padding:0px 15px 0px 0px; /*Haut - Droit - Bas - Gauche*/;
}
/* pour justifier le text au centre*/
.soins h1
{
    text-align:center;
	
    }
/*-----------------------------Début des div de variantes des soins --------------------------------------------------------------*/
.typeSoinsPlaies {
 
 background-color:#7FFFD4;
  float:left;
  width:25%; /* The width is 25%, by default to match 100% for 4 types*/
  padding:15px 15px 70px 15px; /*Haut - Droit - Bas - Gauche*/
  text-align:center;
  /*border: 1px solid red;*/
  height:450px
}

/* pour justifier le text à gauche et italique*/
.typeSoinsPlaies h4
{
    text-align:left;
	/*font-style: italic;*/
	font-weight: normal;
    }

.typeSoinsToilette {
 
 background-color:#FFFFFF;
  float:left;
  width:25%; /* The width is 25%, by default to match 100% for 4 types*/
  padding:15px 15px 20px 15px; /*Haut - Droit - Bas - Gauche*/
  text-align:center;
  height:450px
}

/* pour justifier le text à gauche */
.typeSoinsToilette  h4
{
    text-align:left;
	font-weight: normal; /* override la mise en gras du titre h4*/
	
    }


.typeSoinsInjections {
 
 background-color:#7FFF00;
  float:left;
  width:25%; /* The width is 25%, by default to match 100% for 4 types*/
  padding:15px 15px 130px 15px; /*Haut - Droit - Bas - Gauche*/
  text-align:center;
    height:450px
}
/* pour justifier le text à gauche */
.typeSoinsInjections   h4
{
    text-align:left;
	font-weight: normal; /* override la mise en gras du titre h4*/
	
    }
	

.typeSoinsPalliatif {
 
 background-color:#FF7F50;
  float:left;
  width:25%; /* The width is 25%, by default to match 100% for 4 types*/
  padding:15px 15px 40px 15px; /*Haut - Droit - Bas - Gauche*/
  text-align:center;
  height:450px
}

/* pour justifier le text à gauche */
.typeSoinsPalliatif  h4
{
    text-align:left;
	font-weight: normal; /* override la mise en gras du titre h4*/
	
    }
	
	

/*-----------------------------Fin des div de variantes des soins --------------------------------------------------------------*/

/* Use a media query to add a breakpoint at 620px: */
@media only screen and (max-width:620px) {
  /* For mobile phones: */
.header, .footer,.mainLeft, .mainRight, .soins,.typeSoins, .typeSoinsPlaies, .typeSoinsToilette, .typeSoinsInjections, .typeSoinsPalliatif {
    width:100%;/* The width is 100%, when the viewport is 620px or smaller */
  }
}